<template>
  <div class="student">
    <el-card>
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="年级：">
            <el-input v-model="params.gradeLevel" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 列表 -->
      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="Id" width="50" />
        <el-table-column prop="title" label="标题" width="150" />
        <el-table-column prop="gradeLevel" label="学级" width="160">
          <template v-slot="scope">
            <span v-if="scope.row.gradeLevel == 1">一年级</span>
            <span v-else-if="scope.row.gradeLevel == 2">二年级</span>
            <span v-else-if="scope.row.gradeLevel == 3">三年级</span>
            <span v-else-if="scope.row.gradeLevel == 4">四年级</span>
            <span v-else-if="scope.row.gradeLevel == 5">五年级</span>
            <span v-else-if="scope.row.gradeLevel == 6">六年级</span>
            <span v-else-if="scope.row.gradeLevel == 7">初一</span>
            <span v-else-if="scope.row.gradeLevel == 8">初二</span>
            <span v-else-if="scope.row.gradeLevel == 9">初三</span>
            <span v-else-if="scope.row.gradeLevel == 10">高一</span>
            <span v-else-if="scope.row.gradeLevel == 11">高二</span>
            <span v-else-if="scope.row.gradeLevel == 12">高三</span>
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="发送人" width="150" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" width="260px">
          <template v-slot="scope">
            <el-button size="small" @click="showEdit(scope.row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px;">
        <el-pagination v-model:current-page="params.pageIndex" v-model:page-size="params.pageSize"
          :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>


  </div>
</template>

<script setup lang="ts">
import ExamAPI from '@/api/system/exam.api'
import missionAPI, { MissionParams, MissionReturn, Mission } from '@/api/system/mission.api'

let tableData = ref<Mission[]>([])
let loading = ref(false)
let total = ref(0)
const router = useRouter()

const handleSizeChange = (val: number) => {
  params.value.pageSize = val
  getList()
}

const handleCurrentChange = (val: number) => {
  params.value.pageIndex = val
  getList()
}

const params = ref<MissionParams>({
  gradeLevel: null,
  pageIndex: 1,
  pageSize: 10
})

function getList() {
  loading.value = true
  missionAPI.getMissionPage(params.value).then((res: MissionReturn) => {
    // console.log(res);
    tableData.value = res.list
    total.value = res.total
  }).finally(() => {
    loading.value = false
  })
}

function del(id: number) {
  ElMessageBox.confirm(
    '确定要删除吗',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // ExamAPI.delUser(id).then(() => {
      //   ElMessage({
      //     message: "删除成功",
      //     type: 'success',
      //   })
      //       getList()
      //     })
      // }).catch (() => {
      //   ElMessage({
      //     type: 'info',
      //     message: '取消删除',
      //   })
    }
    )

}

function showEdit(id: string | null) {
  router.push(`student/edit?id=${id}`)
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.student {
  padding: 16px;
}
</style>
